<template>
	<view>
		<u-navbar title="提取视频内容" back-icon-color="#fff" title-color="#fff" :background="background"></u-navbar>
		<view class="flex-col page" style="padding-bottom: 30rpx;">
			<view class="flex-col self-stretch group_2 mt-23">
				<view class="flex-col section">
					<view class="flex-col">
						<view class="flex-row items-center self-stretch">
							<image class="image_3"
								src="https://terminator.axu9.com/images/lianjie-icon.png" />
							<text class="font ml-9-5">链接文案提取</text>
						</view>
						<!-- <text class="self-start text_2 mt-17">粘贴你的视频链接</text> -->
						<textarea style="width: 100%;margin-bottom: 28rpx;line-height: 34rpx;" v-model="link" placeholder="粘贴你的视频链接" placeholder-class="self-start text_2 mt-17" class="self-start font mt-17" maxlength="1000"/>
					</view>
					<view class="flex-row group_3">
						<view @click="pasteLink" class="flex-col justify-start items-center text-wrapper"><text class="font_2">粘贴链接</text>
						</view>
						<view @click="extract" class="ml-14 flex-col justify-start items-center text-wrapper_2">
							<text class="font text_3">提取音频</text>
						</view>
					</view>
				</view>
				<view v-if="audioUrl != ''" class="flex-col section_2 mt-15">
					<text class="self-start font_3">音频内容</text>
					<view class="flex-col self-stretch mt-22-5">
						<view class="flex-row items-center section_3" 
							@click="playAudio"
						:style="{'border':isAudioPlay?'1px solid #439051':'1px solid #2a2f2f'}" >
							<image class="image_4"
								src="https://terminator.axu9.com/images/audio-select-icon.png" />
							<text class="font text_4 ml-3-5 audio_width">{{audioName}}</text>
							<image class="image_41" v-show="isAudioPlay"
								src="https://terminator.axu9.com/images/playing.gif" mode="widthFix" />
						</view>
						<view class="flex-row group_3">
							<view @click="selectAudio" class="flex-col justify-start items-center text-wrapper"><text class="font_2">选择音频</text>
							</view>
							<view @click="extractwenzi" class="ml-14 flex-col justify-start items-center text-wrapper_2">
								<text class="font text_3">提取文案</text>
							</view>
						</view>
						<!-- <view class="flex-col justify-start items-center text-wrapper_3 mt-14-5">
							<text class="font_2">选择音频</text>
						</view> -->
					</view>
				</view>
				<view v-if="videoContent != ''" class="flex-col section_4 mt-15">
					<text class="self-start font_3">文本内容</text>
					<view class="flex-col justify-start items-center self-stretch image-wrapper">
							{{videoContent}}
					</view>
					<view class="flex-row self-stretch group_4">
						<view @click="useWenan" class="flex-col justify-start items-center text-wrapper"><text class="font_2">使用文案</text>
						</view>
						<view @click="startRec" class="ml-14 flex-col justify-start items-center text-wrapper_2">
							<text class="font_2 text_5">开始录制</text>
						</view>
					</view>
				</view>
				<view v-if="videoPath != ''" class="flex-col section_2 mt-15">
					<text class="self-start font_3">视频内容</text>
					<view class="flex-col self-stretch mt-22-5">
						<view class="vide" >
							<video style="width: 100%;" :src="videoPath" controls="true" object-fit="cover"></video>
						</view>
						<view class="flex-row group_3">
							<view @click="downloadVideo" class="flex-col justify-start items-center text-wrapper">
								<text class="font_2">下载视频</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 下载视频进度条弹窗 -->
		<progressPop ref="progressPop" :isShow="false" :percent="percent" @cancel="showProgressCancel"></progressPop>
		
		<!-- 协议弹窗 -->
		<agreementPop ref="agreementpop" @noagree="noagree"></agreementPop>
	</view>
</template>

<script>
	const innerAudioContext = uni.createInnerAudioContext();
	
	innerAudioContext.autoplay = false;
	innerAudioContext.volume = 1;
	
	import { 
		getAgreement,
		getYinpinTiqu,//音频提取
		getYinseTiqu,//生成状态
		getWenanTiqu//文字提取
	} from "@/api/video.js"
	import progressPop from "../../components/progressPop/index.vue";
	import agreementPop from "../../components/agreementPop/index.vue"
	export default {
		components: {
			progressPop,
			agreementPop
		},
		data() {
			return {
				background: {
					backgroundColor: 'rgba(0,0,0,0)',
				},
				isAgree: false,
				// showPop: false,
				maskCustomStyle: {
					background: 'rgba(0, 0, 0, 1)'
				},
				// customStyle: {
				// 	background: 'rgba(0, 0, 0, 0)',
				// 	backgroundColor: 'rgba(0, 0, 0, 0)'
				// },
				checked: false,
				videoContent: '',
				link: '',
				title: '',//标题
				agreement: '',//协议名称
				content: '',//协议内容
				audioUrl: '',//音频路径
				audioName: '',//音频名称
				duration: '',//音频描述
				videoPath: '',//视频路径
				toOptionType: 1,//跳转类型 1音视频合成 2音频库--添加音频 3添加音频
				audioData:{},
				
				isAudioPlay:false,
				
				percent: 0,
				downloadTask: null, //上传视频任务
			}
		},
		onHide() {
			if(this.isAudioPlay){
				this.isAudioPlay = false
				innerAudioContext.stop()
			}
			
		},
		onUnload() {
			if(this.isAudioPlay){
				innerAudioContext.stop()
				innerAudioContext.destroy()
			}
		},
		onLoad(options) {
			console.log(options,'options')
			// this.videoPath = options.videoPath;
			this.toOptionType = options.toOptionType;
			this.toAddType = options.toAddType ? options.toAddType : 1;
			this.clickoption  = options.clickoption ? options.clickoption : 1;
			this.getAgree()
			this.isAgree = uni.getStorageSync('isAgree') ? uni.getStorageSync('isAgree') : false;
			if (!this.isAgree) {
				// this.showPop = true;
				this.$refs.agreementpop.open()
			}
			// this.$refs.agreementpop.open()
		},
		// onShareAppMessage: function (res) {},//分享好友
		// onShareTimeline(){},//分享朋友圈
		methods: {
			noagree(){
				uni.navigateBack({
					delta: 1
				})
			},
			// 协议获取
			getAgree(){
				getAgreement({
					id: 2
				}).then(res => {
					console.log(res,'协议获取')
					this.title = res.data.title;
					this.agreement = res.data.description;
					// this.content = res.data.content;
					this.content = res.data.content.replace(/\<p/gi, '<p style="color: #fff"');
				}).catch(err => {
					
				})
			},
			// 粘贴链接
			pasteLink(){
				var _this = this;
				wx.getClipboardData({  
				    success(res) {  
						_this.link = res.data
				         
				      
				    }  
				  });  
			},
			// 提取音频
			async extract(){
				if(this.link == ''){
					uni.showToast({
						title: '链接不能为空',
						icon: 'none'
					})
					return
				}
				uni.showLoading({
					title:"提取中",
					mask:true
				})
				let res = await getYinpinTiqu({
					uid:uni.getStorageSync("userId"),
					url_text:this.link
				})
				if(res.errno == 0){
					// 循环查询生成状态
					await this.getVideoStatus(res.data,'audio')
				}else{
					uni.hideLoading()
					uni.showToast({
						title:res.msg,
						icon:"none"
					})
				}
				
				// this.audioUrl = "https://audiovideo.axa2.com/20240812/66b9c1033bb15.m4a";
				// this.audioName = "111.m4a";
				// this.videoContent = "今天是美好的一天，阳光明媚，今天是美好的一天，阳光明媚，今天是美好的一天，阳光明媚今天是美好的一天，阳光明媚，今天是美好的一天，阳光明媚，今天是美好的一天，阳光明媚，今天是美好的一天，阳光明媚，今天是美好的一天，阳光明媚，今天是美好的一天，阳光明媚，今天是美好的一天，阳光明媚，今天是美好的一天，阳光明媚今天是美好的一天，阳光明媚"
			},
			// 提取文字
			async extractwenzi(){
				uni.showLoading({
					title:"提取中",
					mask:true
				})
				let res = await getWenanTiqu({
					id:this.audioData.id.toString(),
					audio_url:this.audioUrl
				})
				if(res.errno == 0){
					// 循环查询生成状态
					await this.getVideoStatus(this.audioData.id,'text')
				}else{
					uni.hideLoading()
					uni.showToast({
						title:res.msg,
						icon:"none"
					})
				}
				
			},
			async getVideoStatus(vid,type){
				let _this = this
				let yin = await getYinseTiqu({
					id:vid
				})
				if(yin.errno == 0){
					if(type == "audio"){
						getAudio(vid,yin.data.status)
					}else{
						getText(vid,yin.data.t_status)
					}
				}else{
					uni.hideLoading()
					uni.showToast({
						title:yin.msg,
						icon:"none"
					})
				}
				
				
				
				// 获取音频
				function getAudio(vid,status){
					if(status == 0){
						setTimeout(()=>{
							_this.getVideoStatus(vid,'audio')
						},2000)
					}else if(status == 1){
						uni.hideLoading()
						_this.audioData = yin.data
						_this.audioUrl = yin.data.mp3
						_this.videoPath = yin.data.file
						_this.audioName = yin.data.title
						_this.duration = yin.data.duration
					}else{
						uni.hideLoading()
						uni.showToast({
							title:"提取失败",
							icon:"none"
						})
					}
				}
				// 获取文案
				function getText(vid,status){
					if(status == 0){
						setTimeout(()=>{
							_this.getVideoStatus(vid,'text')
						},2000)
					}else if(status == 1){
						uni.hideLoading()
						_this.audioData = yin.data
						_this.videoContent = yin.data.text
					}else{
						uni.hideLoading()
						uni.showToast({
							title:"提取失败,稍后重试",
							icon:"none"
						})
					}
				}
				
				
			},
			// 开始录制
			startRec(){
				let text = this.videoContent.slice(0,1000)
				uni.navigateTo({
					url:'/pagesCreate/addAudio/index?toAddType=5' +
					 '&toOptionType=' + this.toOptionType + 
					 '&clickoption=' + this.clickoption+
					 '&wenan=' + text
				})
				// +
				// '&videoPath=' + this.videoPath
			},
			// 使用文案
			useWenan(){
				let text = this.videoContent.slice(0,3000)
				uni.navigateTo({
					url: '/pagesCreate/addAudioByText/index?clickoption=2' + '&toOptionType=' + this.toOptionType +  '&videoContent=' + text
				})
				//  + '&videoPath=' + this.videoPath
			},
			playAudio(){
				if(!this.isAudioPlay){
					innerAudioContext.src = this.audioUrl
					innerAudioContext.play()
				}else{
					innerAudioContext.stop()
				}
				this.isAudioPlay = this.isAudioPlay ? false : true
			},
			// 选择音频
			selectAudio(){
				
				// uni.switchTab({
				// 	url:"/pages/create/index?audioUrl="+this.audioUrl
				// })
				uni.reLaunch({
					url: '/pages/create/index?audioTitle=' + this.audioName + '&audioId='  + '&audioUrl=' + this.audioUrl + '&duration=' +this.duration
				});
			},
			showProgressCancel() {
				this.$refs.progressPop.close();
			},
			// 下载视频
			downloadVideo() {
				this.$isAuthorize('scope.writePhotosAlbum',{title: '保存视频权限',content: '为了将视频保存到您的相册，我们需要获取相应的存储权限。请允许我们访问您的存储，以便我们能够正确保存视频。'}).then(res=> {
					console.log(res,'授权')
					if(res == true){
						// 已授权
						console.log('已授权')
						// recorderManager.start();
						this.downloadVideoAuthSuccess()
					}else {
						// 未授权打开授权
						console.log('未授权')
					}
				})
				
			},
			// 下载视频
			downloadVideoAuthSuccess() {
				let u = this.videoPath.split(":")
				u[0] = "https:"
				let p = u.join("")
				var _this = this;
				uni.showLoading({
					title: '下载中'
				})
				_this.downloadTask = uni.downloadFile({
					url: p,
					success: function(res) {
						uni.hideLoading();
						var filePath = res.tempFilePath;
						uni.saveVideoToPhotosAlbum({
							filePath: res.tempFilePath,
							success: res => {
								uni.hideLoading()
								uni.showToast({
									title: "保存成功",
									duration: 2000,
								})
								setTimeout(() => {
									_this.$refs.progressPop.close();
									_this.percent = 0;
								}, 1000)
							},
							fail() {
								uni.showToast({
									title: "保存失败",
									icon: 'none',
									duration: 2000,
								})
								_this.$refs.progressPop.close();
								_this.percent = 0;
							}
						})
					},
					fail: function(err) {
						uni.hideLoading();
						console.log(err, 'errr')
						uni.showToast({
							title: '下载失败',
							icon: 'none'
						})
						_this.$refs.progressPop.close();
					}
				})
				_this.downloadTask.onProgressUpdate((res) => {
					
					if (res.progress > 0) {
						uni.hideLoading();
						_this.$refs.progressPop.open();
					}
					_this.percent = res.progress;
					if (_this.percent >= 100) {
						
						// setTimeout(() => {
						// 	_this.$refs.progressPop.close();
						// 	_this.percent = 0;
						// }, 1000)
					
					
					}
				})
			},
			// 下载视频到本地
			uploadVideo(){
				let u = this.videoPath.split(":")
				u[0] = "https:"
				let p = u.join("")
				uni.showLoading({
					title:"下载中",
					mask:true
				})
				uni.downloadFile({
					url:p,
					success(res) {
						uni.hideLoading()
						if(res.statusCode == 200){
							uni.saveVideoToPhotosAlbum({
								filePath:res.tempFilePath,
								success() {
									uni.showToast({
										title:"保存成功",
										icon:"none"
									})
								},
								fail() {
									uni.showToast({
										title:"保存失败",
										icon:"none"
									})
								}
							})
						}
						console.log(res);
					},
					fail(err) {
						uni.hideLoading()
						uni.showToast({
							title:"下载失败",
							icon:"none"
						})
						console.log(err);
						console.log("本地临时文件生成失败");
					}
				})
			}
		}
	}
</script>
<style>
	page {
		/* padding: 35rpx 0 45rpx; */
		background-color: #111113;
		width: 100%;
		/* overflow-y: auto;
		overflow-x: hidden;
		height: 100%; */
	}
</style>
<style lang="less" scoped>
	/deep/ .u-mode-center-box {
		background-color: rgba(0, 0, 0, 0) !important;
	}
	@import url(../../static/css/common.css);

	.mt-23 {
		margin-top: 46rpx;
	}

	.ml-9-5 {
		margin-left: 19rpx;
	}

	.mt-17 {
		margin-top: 34rpx;
	}

	.mt-98-5 {
		margin-top: 197rpx;
	}

	.mt-22-5 {
		margin-top: 45rpx;
	}

	.ml-3-5 {
		margin-left: 7rpx;
	}

	.mt-14-5 {
		margin-top: 29rpx;
	}

	.mt-15 {
		margin-top: 30rpx;
	}



	.image {
		width: 655rpx;
		height: 24rpx;
	}

	.group {
		padding: 0 20rpx;
	}

	.image_2 {
		width: 20rpx;
		height: 35rpx;
	}

	.pos {
		position: absolute;
		left: 20rpx;
		top: 50%;
		transform: translateY(-50%);
	}

	.text {
		color: #ffffff;
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: 500;
		line-height: 34rpx;
	}

	.group_2 {
		padding: 0 30rpx;
	}

	.section {
		padding: 41rpx 30rpx 38rpx;
		background-color: #212123;
		border-radius: 16rpx;
	}

	.image_3 {
		width: 33rpx;
		height: 33rpx;
	}

	.font {
		font-size: 30rpx;
		font-family: PingFang SC;
		line-height: 29rpx;
		font-weight: 500;
		color: #ffffff;
	}

	.text_2 {
		margin-left: 12rpx;
		color: #72777f;
		font-size: 26rpx;
		font-family: PingFang SC;
		line-height: 25rpx;
	}

	.group_3 {
		padding: 0 16rpx;
	}

	.text-wrapper {
		flex: 1 1 286rpx;
		padding: 30rpx 0;
		border-radius: 16rpx;
		height: 90rpx;
		border-left: solid 2rpx #00e586;
		border-right: solid 2rpx #00e586;
		border-top: solid 2rpx #00e586;
		border-bottom: solid 2rpx #00e586;
	}

	.font_2 {
		font-size: 30rpx;
		font-family: PingFang SC;
		line-height: 29rpx;
		font-weight: 500;
		color: #00e586;
	}

	.text-wrapper_2 {
		flex: 1 1 286rpx;
		padding: 30rpx 0;
		background-image: linear-gradient(90deg, #00ccbb 0%, #00e586 100%);
		border-radius: 16rpx;
		height: 88rpx;
	}

	.text_3 {
		line-height: 28rpx;
	}

	.section_2 {
		padding: 46rpx 30rpx;
		background-color: #212123;
		border-radius: 16rpx;
	}

	.font_3 {
		font-size: 32rpx;
		font-family: PingFang SC;
		line-height: 31rpx;
		font-weight: 500;
		color: #ffffff;
	}

	.section_3 {
		padding: 28rpx 18rpx 17rpx;
		background-color: #39444069;
		border-radius: 20rpx;
		margin-bottom: 28rpx;
	}

	.image_4 {
		width: 81rpx;
		height: 74rpx;
	}
	.image_41 {
		width: 92rpx;
		height: 74rpx;
	}
	.audio_width{
		width: calc(100% - 180rpx);
		white-space: nowrap;      /* 保持文本在一行内显示 */
		overflow: hidden;         /* 超出容器部分隐藏 */
		text-overflow: ellipsis;  /* 超出文本用省略号表示 */
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.text_4 {
		line-height: 31rpx;
	}

	.text-wrapper_3 {
		padding: 28rpx 0;
		border-radius: 16rpx;
		border-left: solid 2rpx #00e586;
		border-right: solid 2rpx #00e586;
		border-top: solid 2rpx #00e586;
		border-bottom: solid 2rpx #00e586;
	}

	.section_4 {
		padding: 46rpx 27rpx 0 30rpx;
		background-color: #212123;
		border-radius: 16rpx;
	}

	.image-wrapper {
		margin-top: 32rpx;
		padding: 30rpx 20rpx 16rpx;
		border-radius: 20rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #c8c8c8;
		background-color: #212123;
		border: 2rpx solid #8f9192;
		height: 214rpx;
		overflow-y: scroll;
	}

	.image_g{
		width: 46rpx;
		height: 32rpx;
	}

	.image_5 {
		width: 557rpx;
		height: 168rpx;
	}

	.group_4 {
		padding: 28rpx 17rpx;
	}

	.text_5 {
		color: #fefefe;
		line-height: 28rpx;
	}
</style>